<template>
  <div class='container'>
     <el-dialog title="题目预览"  width="900px" :visible.sync="dialogFormVisible" append-to-body>
      <el-row>
        <el-col :span="6" >
          <span v-if="quesPreview.questionType==1" >【题型】：单选题</span>
          <span v-else-if="quesPreview.questionType==2" >【题型】：多选题</span>
          <span v-else >【题型】：简答题</span>
        </el-col>

        <el-col :span="6">【编号】：{{ quesPreview.id }}</el-col>
        <el-col :span="6" >
          <span v-if="quesPreview.difficulty==1" >【难度】：简单 </span>
           <span v-else-if="quesPreview.difficulty==2" >【难度】：一般 </span>
           <span v-else >【难度】：困难 </span>
        </el-col>
        <el-col :span="6">【标签】：{{ quesPreview.tags }}</el-col>
        <el-col :span="6">【学科】：{{ quesPreview.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ quesPreview.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{ quesPreview.direction }}</el-col>
      </el-row>
      <hr>
      <div class="question">
        【题干】：<div v-html="quesPreview.question" style="color:blue"></div>
        <div class="radio" v-if="quesPreview.questionType==1">
          <div class="info">单选题 选项：（以下选中的选项为正确答案）</div>
             <el-radio
              v-for="item in quesPreview.options"
              :key="item.id"
              :value="1"
              :label="item.isRight"
              onclick="return false"
              size="medium"> {{item.code}} :  {{item.title}} </el-radio>
        </div>
        <div class="checkbox" v-else-if="quesPreview.questionType==2">
          <el-checkbox
            v-for="item in quesPreview.options"
            :key="item.id"
            onclick="return false"
            :checked="item.isRight === 1"
            > {{item.code}} :  {{item.title}} </el-checkbox>
        </div>
        <div class="jianda" v-else>
        </div>
      </div>
      <hr>
      <div class="answer">
        【参考答案】：
        <el-button type="danger" size="small" @click="videoShow" >视频答案预览</el-button>
        <div class="video" style="margin-top: 10px" v-if="videoFlag">
          <video :src="quesPreview.videoURL" controls style="width:400px;height:300px;"></video>
        </div>
      </div>
      <hr>
      <div style="margin: 10px 0">
        【答案解析】：<div v-html="quesPreview.answer" style="display: inline-block"></div>
      </div>
      <hr>
      <div>
        【题目备注】：{{ quesPreview.remarks }}
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button @click="close" type="primary">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    quesPreview: {
      type: Object
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      videoFlag: false
    }
  },
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
      console.log('00000000000')
      // this.$emit('detailQues','this.quesPreview')
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    videoShow () {
      this.videoFlag = true
    },
    close () {
      this.$confirm('确认关闭吗？')
        .then(() => {
          this.dialogFormH()
        })
        .catch(() => {
          // 用户点了取消
        })
    }
  }
}
</script>

<style scoped lang='scss'>
.questions-preview {
    .el-dialog {
      .el-row {
        .el-col {
          margin: 10px 0;
        }
      }
      .question {
        .radio {
          div {
            margin-bottom: 10px;
          }
        }
        .checkbox {
          div {
            margin-bottom: 10px;
          }
        }
      }
      .videoHide {
        display: block;
      }
    }
  }
</style>
